<template>
  <div>
    <el-card style="margin: 20px 0">
      <CategorySelect
        @getCategoryId="getCategoryId"
        :isShowTable="scene == 0"
      />
    </el-card>
    <el-card>
      <!-- 将来这里有三个部分进行切换 -->
      <!-- spu列表数据展示 -->
      <div v-show="scene == 0">
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="margin: 0 0 20px"
          @click="addSpu()"
          :disabled="!category3Id"
        >
          添加SPU
        </el-button>
        <el-table style="width: 100%" border :data="spuInfo.records">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="spuName"
            label="SPU名称"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="description"
            label="SPU描述"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="prop"
            label="操作"
            width="width"
            align="center"
          >
            <template slot-scope="{ row }">
              <el-tooltip content="添加sku" placement="bottom" effect="light">
                <el-button
                  type="success"
                  icon="el-icon-plus"
                  circle
                  size="mini"
                  @click="addSku(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="修改spu" placement="bottom" effect="light">
                <el-button
                  type="warning"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  @click="updateSpu(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="查看spu当前全部sku列表"
                placement="bottom"
                effect="light"
              >
                <el-button
                  type="info"
                  icon="el-icon-message"
                  circle
                  size="mini"
                  @click="lookSkuList(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除Spu" placement="bottom" effect="light">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="open(row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          :current-page="1"
          :page-sizes="[3, 5, 10]"
          :page-size="spuInfo.size"
          layout=" prev, pager, next, jumper, sizes,total"
          :total="spuInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="text-align: center"
        >
        </el-pagination>
      </div>
      <!-- 添加spu|修改spu展示 -->
      <SpuForm v-show="scene == 1" @changeScene="changeScene" ref="spu" />
      <!-- 添加sku展示 -->
      <SkuForm v-show="scene == 2" @changeScene="changeScene" ref="sku" />
      <!-- 对话框 -->
      <el-dialog
        :title="`${title}的SKU列表`"
        :visible.sync="dialogTableVisible"
      >
        <el-table
          :data="skuList"
          style="width: 100%"
          border
          v-loading="loading"
        >
          <el-table-column prop="skuName" label="名称" width="width">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="weight"
            label="重量"
            width="width"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="prop"
            label="默认图片"
            width="width"
            align="center"
          >
            <template slot-scope="{ row }">
              <img :src="row.skuDefaultImg" style="width: 100px" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 引入子组件
import SkuForm from "./SkuForm";
import SpuForm from "./SpuForm";
export default {
  name: "Spu",
  components: { SkuForm, SpuForm },
  data() {
    return {
      // 存储一二三级分类的id
      category1Id: "",
      category2Id: "",
      category3Id: "",
      // 控制三级联动的可操作性
      isShowTable: true,
      // 当前页
      page: 1,
      // 每页展示多少数据
      limit: 3,
      // 存储服务器传回来的数据
      spuInfo: {},
      // 切换场景 0:展示spu列表数据 1:展示spu添加或修改 2:展示sku添加 默认为0
      scene: 0,
      // 控制对话框显示与隐藏
      dialogTableVisible: false,
      // 存储标题
      title: "",
      // 存储服务器返回的SKU列表数据
      skuList: [],
      // 加载....
      loading: true,
    };
  },
  methods: {
    // 获取SPU列表数据的方法
    async getSpufoList() {
      // 解构赋值
      const { page, limit, category3Id } = this;
      let result = await this.$API.spu.reqSpuList(page, limit, category3Id);
      if (result.code == 200) {
        this.spuInfo = result.data;
      }
    },
    // 三级联动的自定义事件 把子组件相应的id传给父组件
    getCategoryId({ categoryId, level }) {
      if (level == 1) {
        this.category1Id = categoryId;
        this.category2Id = "";
        this.category3Id = "";
      } else if (level == 2) {
        this.category2Id = categoryId;
        this.category3Id = "";
      } else {
        this.category3Id = categoryId;
        // 收集完三个id，可以发请求
        this.getSpufoList();
      }
    },
    // 改变当前页的回调
    handleCurrentChange(page) {
      this.page = page;
      // 再次发请求获取数据
      this.getSpufoList();
    },
    // 改变当前展示数据的回调
    handleSizeChange(limit) {
      this.limit = limit;
      // 再次发送请求
      this.getSpufoList();
    },
    // 添加SPU
    addSpu() {
      this.scene = 1;
      // 在父组件当中可以通过$refs调用子组件方法
      this.$refs.spu.addSpuData(this.category3Id);
    },
    // 修改某一个SPU
    updateSpu(row) {
      this.scene = 1;
      // 在父组件当中可以通过$refs调用子组件方法
      this.$refs.spu.initSpuData(row);
    },
    // 自定义事件-切换场景
    changeScene(scene) {
      this.scene = scene;
      //子组件通知父组件切换场景，需要再次获取spu列表的数据进行展示
      this.getSpufoList();
    },
    open(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let result = await this.$API.spu.reqDeleteSpu(row.id);
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getSpufoList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加sku
    addSku(row) {
      this.scene = 2;
      // 父组件调用子组件的方法，让子组件发请求
      this.$refs.sku.getData(this.category1Id, this.category2Id, row);
    },
    // 查看sku列表
    async lookSkuList(row) {
      this.skuList = [];
      // 点开sku列表lodaing属性再次变为真
      this.loading = true;
      // 显示对话框
      this.dialogTableVisible = true;
      // 对话框的标题
      this.title = row.spuName;
      // 发请求获取sku列表
      let result = await this.$API.spu.reqSkuList(row.id);
      if (result.code == 200) {
        this.skuList = result.data;
        // 当有数据后，lodaing属性变为假
        this.loading = false;
      }
    },
  },
};
</script>

<style>
</style>